<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/views/include.inc.jsp" %>
<style>
    .main-top,.main-top-bottom{
        min-width: 1365px;
    }
</style>
<script src="${contextPath}/js/main.js" type="text/javascript"></script>
<script>
    var querying;
    var countDownTxt = "还有{0}秒刷新数据";
    var interval = 60;//单位秒
    var refreshInterval;
    var countDowmTime;
    var countDown = interval;
    $(function () {
        loadMonitor();
        setTargetTableColumnWidth($("#monitor-fix-head"), $("#monitor-table"));

        function initRefreshInterval() {
            setCountDown();
            refreshInterval = setInterval(function () {
                clearCountDown();
                if (!querying) {
                    loadMonitor(function(){setCountDown();});
                }
            }, interval * 1000);
        }

        function closeRefreshInterval() {
            clearInterval(refreshInterval);
            clearCountDown();
        }

        initRefreshInterval();
        $(".refresh-icon").click(function () {
            if (this.className == "refresh-icon") {
                this.className = "refresh-close-icon";
                this.title = '开始刷新';
                closeRefreshInterval();
            } else {
                this.className = "refresh-icon";
                this.title = '停止刷新';
                initRefreshInterval();
            }
        })
    });

    function setCountDown() {
        $("#countDown").text(stringFormat(countDownTxt,countDown));
        if(countDown > 0)
        {
            countDown--;
        }
        countDowmTime = setTimeout(function () {
            clearTimeout(countDowmTime);
            setCountDown()
        }, 1000);
    }
    function clearCountDown(){
        $("#countDown").html("");
        countDown = interval;
        clearTimeout(countDowmTime);
    }
    function loadMonitor(callback) {
        var tbody = $("#monitor-table tbody");
        if (tbody.length == 0)return;
        tbody.empty();
        $('.loading').show();
        querying = true;
        $.get('${contextPath}/monitor/monitor/load', {}, function (data) {
            $("#flightPlanCount").text(data.flightPlans.length);
            console.log(data.flightPlans)
            $.each(data.flightPlans, function (index, item) {
                var tr = $("<tr></tr>");
                tr.append($("<td></td>").html(item.flightId));
                tr.append($("<td></td>").html(item.aircraftId));
                tr.append($("<td></td>").html(item.planId));
                tr.append($("<td></td>").html(item.dep));
                tr.append($("<td></td>").html(item.arr));
                var routeline = item.routeline;
                if (routeline.length > 18) {
                    routeline = item.routeline.substr(0, 18) + '...';
                }
                tr.append($("<td></td>").html(routeline).attr("title", item.routeline));
                var format = 'yyyy-MM-dd hh:mm';
                if (item.planDate) {
                    //tr.append($("<td></td>").html(new Date(item.planDate).Format(format)));
                }
                if (item.sendDate) {
                    tr.append($("<td></td>").html(new Date(item.sendDate).Format(format)));
                } else {
                    tr.append($("<td></td>").html('&nbsp;'));
                }
                if (item.depDate) {
                    tr.append($("<td></td>").html(new Date(item.depDate).Format(format)));
                } else {
                    tr.append($("<td></td>").html('&nbsp;'));
                }

                var statusTd = $("<td></td>");
                var statusItem = getStatusItem(item);
                var planStatusBtn = $('<button class="btn btn-xs"></button>');
                statusTd.append(planStatusBtn.text(statusItem.statusText).addClass(statusItem.cls).attr('title', statusItem.text));
                tr.append(statusTd);

                var wStatusTd = $("<td></td>");
                var ids = '';
                if (item.windInfos && item.windInfos.length > 0) {
                    $.each(item.windInfos, function (index, wind) {
                        ids += wind.id + ',';
                        var windBtn = $('<button class="btn btn-xs"></button>');
                        var wStatusItem = getStatusItem(wind);
                        var windVH = wind.flightLevels + '(' + wStatusItem.statusText + ')';
                        windBtn.addClass(wStatusItem.cls).html(windVH).attr('title', wStatusItem.text);
                        wStatusTd.append(windBtn);
                    })
                }
                tr.append(wStatusTd);

                var sendPlan = $('<button class="btn btn-xs btn-primary">ROUTE</button>');
                tr.append($("<td></td>").append(sendPlan));
                sendPlan.click(function () {
                    $(".modal").modal('show');
                    $(".modal .modal-title").html('发送飞行计划');
                    $(".modal .modal-body").load('${contextPath }/common/showFlightPlan/' + item.id);
                });
                var sendWind = $('<button class="btn btn-xs btn-primary">WD/T</button>');
                tr.append($("<td></td>").append(sendWind));
                sendWind.click(function () {
                    if (ids.length > 0) {
                        $(".modal").modal('show');
                        $(".modal .modal-title").html('风温信息');
                        $.get('${contextPath }/common/showWindInfos', {ids: ids.substr(0, ids.length - 1)}, function (html) {
                            $(".modal .modal-body").html(html);
                        });
                    } else {
                        alert("没有风温报文！");
                    }
                });

                tbody.append(tr);
//                for (var i = 0; i < 30; i++) {
//                    tbody.append(tr.clone());
//                }
            });
            //同步 固定表头的列宽和内容列宽
            setTargetTableColumnWidth($("#monitor-fix-head"), $("#monitor-table"));

            $('.loading').hide();
            querying = false;

            if(callback){
                callback();
            }
        }, 'json');
    }
</script>

<div class="container" style="width: 1365px">
    <div class="main-body-center" style="width: 100%">
        <div class="panel-title">
            <b>监控信息</b> <span class="gray">/</span> <span id="flightPlanCount" class="gray">0</span>

            <div class="title-right">
                <span id="countDown" class="countDown"></span>
                <%--<div class="search">--%>
                <%--<input id="flightPlanSearch" type="text" class="search-text"/>--%>
                <%--</div>--%>
                <div class="options-icons">
                    <div class="refresh-icon" title="停止刷新"></div>
                </div>
            </div>
        </div>
        <table id="monitor-fix-head" class="table-bordered-simple fix-head" cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <th width="50">航班号</th>
                <th width="50">机尾号</th>
                <th width="80">航班计划编号</th>
                <th width="60">起飞机场</th>
                <th width="60">降落机场</th>
                <th width="220">航路代号</th>
                 <%--<th width="102">生成时间</th>--%>
                <th width="102">发送时间</th>
                <th width="102">预计起飞时间</th>
                <th width="80">飞行计划状态</th>
                <th width="250">风温状态</th>
                <th width="70">飞行计划</th>
                <th width="auto">风温报文</th>
            </tr>
            </thead>
        </table>
        <div class="content-body">
            <div class="loading">loading...</div>
            <table id="monitor-table" class="table-bordered-simple" cellpadding="0" cellspacing="0">
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
